<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-10 10:27:00
 * @FilePath: \aster-flowable-uniapp\src\pages\tabbar\approve.vue
 * @Description: 审批
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <view class="box-sizing-b wh-full">
    <van-tabs :active="active" @click-tab="onClickTab" sticky>
      <van-tab :title="ApproveTitleEnum.TODO" :name="TaskStatusEnum.TODO">
        <todo-list :approve-type="loadType" :key="TaskStatusEnum.TODO" />
      </van-tab>
      <van-tab :title="ApproveTitleEnum.COMPLETE" :name="TaskStatusEnum.COMPLETE">
        <complete-list :approve-type="loadType" :key="TaskStatusEnum.COMPLETE" />
      </van-tab>
      <van-tab :title="ApproveTitleEnum.STARTED" :name="TaskStatusEnum.STARTED">
        <started-list :approve-type="loadType" :key="TaskStatusEnum.STARTED" />
      </van-tab>
      <van-tab :title="ApproveTitleEnum.COPY" :name="TaskStatusEnum.COPY">
        <copy-list :approve-type="loadType" :key="TaskStatusEnum.COPY" />
      </van-tab>
      <template #nav-bottom>
        <van-search
          v-model="searchWords"
          placeholder="请输入搜索关键词"
          input-align="center"
          show-action
          shape="round"
          background="#ffffff"
          @input="onSearch"
        >
          <template #action>
            <view class="margin-left-xs" @click="onFilter"> <van-icon name="filter-o" />筛选 </view>
          </template>
        </van-search>
      </template>
    </van-tabs>
    <search-filter
      :showSearchFilter="showSearchFilter"
      :tabType="loadType"
      @closeSearchFilter="closeSearchFilter"
      @submitSearchFilter="submitSearchFilter"
    />
    <van-back-top bottom="100" />
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { TaskStatusEnum, ApproveTitleEnum } from '@/enums/workFlowEnum';
  import { isNotEmpty } from '@/utils/is';
  import { debounce } from '@/utils/common';
  import SearchFilter from '@/components/approve/search-filter.vue';
  import TodoList from '@/components/approve/todo-list.vue';
  import CompleteList from '@/components/approve/complete-list.vue';
  import StartedList from '@/components/approve/started-list.vue';
  import CopyList from '@/components/approve/copy-list.vue';

  const active = ref(TaskStatusEnum.TODO);
  /** 默认加载待我处理 */
  const loadType = ref(TaskStatusEnum.TODO);
  const searchWords = ref('');
  /** 搜索的流程名称 */
  const procDefName = ref('');
  /** 搜索的流程状态 */
  const status = ref('');
  /** 搜索的流程表单id */
  const code = ref('');
  const showSearchFilter = ref(false);

  // 搜索，使用防抖进行处理
  const onSearch = debounce(() => {
    if (isNotEmpty(searchWords.value)) {
      procDefName.value = searchWords.value;
    } else {
      procDefName.value = '';
    }
  }, 300);

  const onFilter = () => {
    showSearchFilter.value = true;
  };
  /**
   * 子组件通知父组件关闭筛选条件弹框
   * @param selectedState 表单状态
   * @param selectedFormId 表单formId
   */
  const closeSearchFilter = () => {
    showSearchFilter.value = false;
  };

  const submitSearchFilter = (selectedState: string, selectedFormId: string) => {
    console.log('条件-->', selectedState, selectedFormId);
    code.value = selectedFormId;
    status.value = selectedState;
    showSearchFilter.value = false;
  };

  //tab 点击事件
  const onClickTab = (item: any) => {
    //当前选中的tab 变了，则情况搜索的关键字
    if (active.value !== item.name) {
      searchWords.value = '';
      procDefName.value = '';
      code.value = '';
      status.value = '';
    }
    active.value = item.name;
    loadType.value = item.name;
  };

  onLoad((option) => {
    //从首页调转，获取要加载的页签类型
    if (isNotEmpty(option)) {
      loadType.value = option?.approveType;
      active.value = loadType.value;
    }
  });
</script>
<style scoped lang="scss">
  .card-title {
    color: #000000;
    font-weight: 600;
  }

  .status {
    color: #56b77a;
    font-weight: 600;
  }
  ::v-deep .van-dropdown-menu__bar {
    box-shadow: none;
  }

  ::v-deep .van-search__action {
    padding: 0 32rpx 0 4rpx;
  }
  ::v-deep .van-collapse-item__content {
    padding: 10rpx 20rpx 24rpx;
  }
</style>
